<template>
    <div v-if="sysType != 'exam'" class="home-page">
        <div class="data-box">
            <div class="left">
                <h3 class="text">公告栏<span class="chakangengduo"@click="goMore">查看更多>></span></h3>
                <div class="new-item" v-for="(item,index) in recList">
                    <span class="name" @click="goGonggao(item)">{{item.title}}</span>
                    <span class="time">{{item.createDate}}</span>
                </div>
            </div>
            <div class="right" style="height: 140px;">
                <h3 class="text">用户信息</h3>
                <!-- <img :src="$axios.defaults.baseURL+userData.photo" alt="" class="head"> -->
                <span class="login">上次登录时间：{{userData.loginDate}}</span>
                <span class="login">昵称：{{userData.nickName}}</span>
                <span class="login">登录次数：{{userData.loginCount}}次</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="data-box">
            <div class="left">
                <h3 class="text">学习情况</h3>
                <div class="count-box">
                    <div class="item" v-for="(item,index) in countList" v-show="item.staus">
                        <el-progress :show-text="false" type="dashboard" :percentage="percentage" :stroke-width="10" :color="item.colors" class="main-progress">33</el-progress>
                        <div class="text-pro"><span v-if="item.count1!='0'">{{item.count1}}{{item.danwei1}}</span>{{item.count}}{{item.danwei}}</div>
                        <span class="text-title">{{item.name}}</span>
                        <!-- <p class="p-text"><span class="num">15%</span> 的同学</p> -->
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="study-box" style="margin-top: 40px;">
                    <h3 class="text" style="margin-bottom:10px;">近期学习课程</h3>
                    <div class="course-box">
                        <div class="item" v-for="(item,index) in courseList" >
                            <img :src="$axios.defaults.baseURL+item.photo" alt="">
                            <span class="name">{{item.courseName}}</span>
                            <div class="go" @click="goPage('dbcourse_content/'+item.id)">继续学习</div>
                        </div>
                        <nodata v-show="courseList.length==0 && start"></nodata>
                        <div style="clear:both"></div>
                    </div>
                    <!-- <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="pageSize"></ui-pagination> -->

                </div>
            </div>
            <div class="right">
                <h3 class="text" style="margin-bottom:10px;">学习排行榜</h3>
                <div class="man-item" >
                    <span class="man">姓名</span>
                    <span class="num">时间</span>
                </div>
                <div class="man-item" v-for="(item,index) in studyRank">
                    <span class="man">{{item.userName}}</span>
                    <span class="num">{{item.studyTime}}分钟</span>
                    <!-- <span class="number">1088分</span> -->
                </div>
            </div>


            <div class="clear"></div>
        </div>
        <div class="data-box1">
          <div class="bottom">
              {{copyright}} 技术支持
          </div>
        </div>
    </div>
</template>

<script>

import Pagination from '@/components/pagination.vue'
import nodata from '@/components/nodata.vue'
import Cookies from 'js-cookie'
import { Notification } from 'element-ui';


export default {
  components: {
      'ui-pagination':Pagination,
      nodata,
  },
    data(){
        return{
            copyright:'',
            start:false,
            total:null,
            pageNo:1,
            pageSize:3,
            studyRank:[],
            timer:null,
            percentage:0,
            countList:[
                {percentage:0,colors:"#0068b7",name:"完成课程数",count:5,danwei:"门",staus:"5门"},
                {percentage:0,colors:"#fda864",name:"学习总时长",count:3,danwei:"分钟",count1:0,danwei1:"小时",staus:"3小时"},
                {percentage:0,colors:"#0068b7",name:"参加测试次数",count:20,danwei:"次",staus:"20次"},
                {percentage:0,colors:"#fda864",name:"通过测试次数",count:15,danwei:"次",staus:"15次"},
                {percentage:0,colors:"#00ffff",name:"获得证书数量",count:0,danwei:"个",staus:""},
                // {percentage:100,colors:"#00ffff",name:"获得证书数量"},
            ],
            userData:{},
            indexData:{},
            recList:[],
            courseList:[],
            sysType:'',
        }
    },
    computed:{

    },
    created(){
        if( Cookies.get('userData')){
            this.userData = JSON.parse(Cookies.get('userData'))
        }
        this.sysType = Cookies.get('sysType');
        // Cookies.set('url','/f/noticeById')
        this.getData();
        // this.getUserData()
        this.getCourse();
        this.getStudyRank()
        this.timer = setInterval(()=>{
          this.increase()
        },100);
        this.getIndexCount();

    },
    beforeDestroy(){

    },
    // updated(){
    //   if(this.percentage>100){
    //     clearInterval(this.timer);
    //     this.timer = null;
    //   }
    // },
    destroyed(){
    },
    mounted(){
        window.localStorage.setItem("yemian", "1");
    },
    head() {
        return {
            title: '个人中心首页',
            meta: [
                {
                  hid: 'description',
                  name: 'description',
                  content: Cookies.get("description")
                },
                {
                  hid: 'keywords',
                  name: 'keywords',
                  content: Cookies.get("keywords")
                },
            ],
            link: [
                  {rel: 'icon', type: 'image/x-icon', href: this.favicon}
            ],

        }
    },
    methods:{
        goMore(){
          this.$router.push('/gonggao2')
        },
        getIndexCount(){
        var that = this;
         this.$axios.$get("/f/homeCount")
          .then(function (response) {
              var data = response.data;
              that.countList[0].count = data.completeCourse;
              that.countList[1].count = data.userStudyTime;
              that.countList[2].count = data.userPaperCount;
              that.countList[3].count = data.userStudyByPaperCount;
              that.countList[4].count = data.userCertificateCount;

              if(data.userStudyTime > 60){

              }
          }).catch(function (error) {
                console.log(error);
          })
        },
        increase() {
          this.percentage += 10;
          if (this.percentage > 100) {
            this.percentage = 100;
            clearInterval(this.timer);
            this.timer = null;
          }
         // if(this.percentage>100){

         // }
        },
        getStudyRank(){
          let that = this;
          this.$axios.$get("/f/linkUserStudyRank")
          .then(function (response) {
              that.studyRank = response.data;

          })
          .catch(function (error) {
                // handle error
                console.log(error);
          })
        },
        goPage(url){
            this.$router.push(url);
        },
        goGonggao(item){
           Cookies.set('url','/f/newsById')
           console.log(item,222)
           this.$router.push('/gonggaolan/'+item.id)
        },
        pageChange(index){
            this.pageNo = index;
            this.getCourse();
        },
        getCourse(){
            let that = this;
            this.$axios.$get("/f/latestStudyCourse?pageNo="+this.pageNo+"&pageSize="+this.pageSize)
            .then(function (response) {
              that.start = true;
                that.total = response.count;
                let list = response.data;
                let arr = [];
                if(list.length!=0){
                    list.forEach((item,i)=>{
                        item = Object.assign(item,item.educationCourse)
                        if(i<10){
                            arr.push(item)
                        }
                    })
                }
                that.courseList = arr;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        getData(){
            let that = this;
            this.$axios.$get("/f/index")
            .then(function (response) {

                that.indexData = response.data;
                that.copyright = that.indexData.webSiteSetings.copyright
                let list = that.indexData.educationNewsList.data.dtoRecPage.list;
                let arr = [];
                list.forEach((item,i)=>{
                    if(i<5){
                        arr.push(item)
                    }
                })

                that.recList = arr;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
    }
}
</script>

<style lang="less" >
    .home-page{
        width:100%;
        height:100%;
        box-sizing:border-box;
        padding:25px;
        overflow:hidden;
        overflow-y:auto;
        // 设置滚动条的宽度

        .data-box1{
            box-sizing:border-box;
            width:100%;
            min-height:calc(100% - 754px);
            padding:10px 20px;
            display:flex;
            align-items: flex-end;
            // margin-bottom:15px;
            // border:1px solid #e2e2e2;
            .bottom{
              width: 100%;
              height: 30px;
              line-height: 30px;
              text-align: center;
              // font-weight: bold;
              font-size: 18px;
              color: #a5a5a5;
              // position: absolute;
              // bottom: 0;
            }
         }
        .data-box{
            box-sizing:border-box;
            width:100%;
            padding:20px 20px;
            border:1px solid #e2e2e2;

            margin-bottom:15px;

            .study-box{
                width:100%;
                float:left;
                margin-top:10px;
                .study-pagination{
                    width:100% !important;
                }
                .course-box{
                    width:100%;
                    box-sizing:border-box;
                    padding:0 15px;
                    margin-top:20px;
                    .item{
                        width:20%;
                        margin:0 2%;
                        // margin-bottom:20px;
                        box-sizing:border-box;
                        border:1px solid #ccc;
                        float:left;
                        img{
                            width:100%;
                            height:104px;
                            display:block;
                        }
                        .name{
                            width:100%;
                            height:30px;
                            line-height:30px;
                            text-align:center;
                            font-size:16px;
                            color:#555555;
                            margin-top:7px;
                            display:block;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                        .go{
                            width:5rem;
                            height:2rem;
                            line-height:2rem;
                            margin:0.4rem auto;
                            text-align:center;
                            background:#0068b7;
                            border-radius:0.4rem;
                            color:#ffffff;
                            font-size:14px;
                            cursor:pointer;
                        }
                    }
                    .item:nth-child(5n){
                        margin-right:0;
                    }
                }
                .text{
                    width:100%;
                    height:50px;
                    line-height:50px;
                    color:#0068b7;
                    box-sizing:border-box;
                    padding-left:10px;
                    border-bottom:1px solid #0068b7;
                    font-size:22px;
                }
            }
            .left{
                width:calc(100% - 310px);
                float:left;
                height:100%;
                .text{
                    width:100%;
                    height:50px;
                    line-height:50px;
                    color:#0068b7;
                    box-sizing:border-box;
                    padding-left:10px;
                    border-bottom:1px solid #0068b7;
                    font-size:22px;
                    .chakangengduo{
                      position: relative;
                      top: 15px;
                      height: 30px;
                      line-height: 30px;
                      float: right;
                      font-size:16px ;
                      // background-color:#0076ca ;
                      color: #0076ca;
                      cursor: pointer;
                    }
                }
                .count-box{
                    width:100%;
                    box-sizing:border-box;
                    display: flex;
                    justify-content:space-evenly;;
                    padding: 15px 0;
                    .item{
                        width:20%;
                        margin-right:2%;
                        float:left;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                        .main-progress{
                            width:100px !important;
                            height:100px !important;
                            margin:0 auto;
                            display:block;

                            .el-progress-circle{
                                width:100% !important;
                                height:100% !important;
                            }
                        }
                         .text-pro{
                              position: absolute;
                              font-size: 18px;
                              font-weight: bold;
                              color: #0068b7;

                              // display: table-cell;
                              // text-align: center;
                              // vertical-align: center;
                         }
                        .text-title{
                            display:block;
                            height:20px;
                            line-height:20px;
                            text-align:center;
                            font-size:15px;
                            font-weight: bold;
                            color:#555555;
                            // margin-top:10px;
                        }
                        .p-text{
                            display:block;
                            height:25px;
                            line-height:25px;
                            text-align:center;
                            font-size:14px;
                            color:#555555;
                            span{
                                color:#0068b7;
                                font-size:18px;
                            }
                        }
                    }
                    .item:nth-child(4n){
                        margin-right:0;
                    }
                }
                .time-box{
                    width:100%;
                    height:30px;
                    margin-top:15px;
                    .name{
                        float:left;
                        height:30px;
                        display:block;
                        line-height:30px;
                        margin-left:15px;
                        color:#0068b7;
                        font-size:16px;
                    }
                    .time{
                        float:left;
                        height:30px;
                        display:block;
                        line-height:30px;
                        margin-left:20px;
                        color:#555555;
                        font-size:16px;
                    }
                }
                .new-item{
                    height:30px;
                    // margin-top:10px;
                    box-sizing:border-box;
                    width:100%;
                    padding:0 15px;
                    .name{
                      cursor: pointer;
                        display:block;
                        width:calc(100% - 180px);
                        float:left;
                        height:30px;
                        line-height:30px;
                        font-size:16px;
                        color:#555555;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow:ellipsis;
                    }
                    .time{
                        display:block;
                        width:180px;
                        text-align:right;
                        float:left;
                        height:30px;
                        line-height:30px;
                        font-size:14px;
                        color:#666666;
                    }
                }
            }
            .right{
                width:270px;
                float:right;
                height:100%;
                .man-item{
                    width:100%;
                    height:40px;
                    .num{
                        float:left;
                        display:block;
                        font-size:16px;
                        height:40px;
                        line-height:40px;
                        // width:140px;
                        color:#555555;
                    }
                    .man{
                        float:left;
                        display:block;
                        font-size:16px;
                        height:40px;
                        line-height:40px;
                        width:140px;
                        color:#555555;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }

                    .number{
                        float:left;
                        display:block;
                        font-size:14px;
                        height:30px;
                        line-height:30px;
                        width:90px;
                        color:#555555;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        text-align:right;
                    }
                }
                .text{
                    width:100%;
                    height:50px;
                    line-height:50px;
                    color:#0068b7;
                    box-sizing:border-box;
                    text-align:center;
                    border-bottom:1px solid #0068b7;
                    font-size:22px;
                }
                .head{
                    display:block;
                    width:100px;
                    height:100px;
                    margin:0 auto;
                    border-radius:50%;
                    margin-top:10px;
                }
                .name{
                    display:block;
                    width:100%;
                    height:30px;
                    line-height:30px;
                    font-size:16px;
                    color:#0068b7;
                    margin-top:10px;
                    box-sizing:border-box;
                    text-align:center;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .login{
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                    display:block;
                    width:100%;
                    height:30px;
                    line-height:30px;
                    font-size:16px;
                    color:#0068b7;
                    box-sizing:border-box;
                    margin-top:2px;
                    text-align:left;
                }
            }
        }
    }
</style>
